<template>
	<view>
		<u-navbar :is-back="true" title="活动详情"></u-navbar>
		<view class="huodong-banner">
			<image src="../../../static/demo/4.jpg" class="banner-img"></image>
		</view>
		<view class="huodong-xinxi">
			<view class="huodong-title">【活动】“一本书·益起读”线下读书公益活动“</view>
			<view class="huodong-renshu u-flex">
				<view class="baomingrenshu">
					报名人数：<text class="color-red">50</text>人
				</view>
				<view class="liulanrenshu">
					浏览人数：<text class="color-red">1250</text>人
				</view>
				<view class="baomingrenshu">
					线下活动
				</view>
			</view>
			<view class="shijian u-flex">
				<image src="../../../static/img/acitivity/shijian.png" class="shijian-icon"></image> 2021/5/9 13:30-17:30
			</view>
			<view class="shijian u-flex">
				<image src="../../../static/img/acitivity/weizhi.png" class="shijian-icon"></image> 上海黄浦区xx街xx号14栋2021室
			</view>
		</view>
		<view class="fabupindao">
			<image src="../../../static/img/acitivity/logo_03.jpg" class="logo-img"></image>
			<view class="fabupindao-cont">
				<view class="fabupindao-name">会明官方活动发布频道</view>
				<view class="fabupindao-text">此账号为会明官方活动策划发布频道</view>
			</view>
		</view>
		<view class="xiangqing-tab">
			<view class="xiangqing-tab-list active">活动详情</view>
			<view class="xiangqing-tab-list">已报名成员(50)</view>
		</view>
		<view class="xiangqing-cont" style="display: none;">
			<view class="content">
				【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“【活动】“一本书·益起读”线下读书公益活动“
			</view>
			<image src="../../../static/demo/2.jpg" class="xuanchuantu" mode="widthFix"></image>
		</view>
		<view class="baomingchengyuan">
			<view class="baomingchengyuan-cell">
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">大领子AAA</view>
				<view class="chakanzhuye">查看主页</view>
			</view>
			<view class="baomingchengyuan-cell">
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">大领子AAA</view>
				<view class="chakanzhuye">查看主页</view>
			</view>
			<view class="baomingchengyuan-cell">
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">大领子AAA</view>
				<view class="chakanzhuye">查看主页</view>
			</view>
			<view class="baomingchengyuan-cell">
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">大领子AAA</view>
				<view class="chakanzhuye">查看主页</view>
			</view>
			<view class="baomingchengyuan-cell">
				<image src="../../../static/demo/1.jpg" class="touxiang"></image>
				<view class="baoming-name">大领子AAA</view>
				<view class="chakanzhuye">查看主页</view>
			</view>	
		</view>
		<view class="xiangqing-foot">
			<u-button shape="circle" hover-class="none" :hair-line="false" class="lijibaoming">立即报名</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #ebebeb;
	}
.huodong-banner{
	width: 100%;
	height: 285rpx;
	.banner-img{
		width: 100%;
		height: 100%;
	}
}
.huodong-xinxi{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 20rpx;
	padding: 30rpx;
	.huodong-title{
		font-size: 30rpx;
	}
	.huodong-renshu{
		margin: 20rpx 0 10rpx;
		.baomingrenshu{
			color: #565656;
			font-size: 24rpx;
		}
		.liulanrenshu{
			color: #565656;
			font-size: 24rpx;
			margin: 0 50rpx;
		}
	}
}
.shijian{
	font-size: 24rpx;
	color: #515151;
	padding-top: 20rpx;
	.shijian-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 15rpx;
	}
}
.fabupindao{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 20rpx;
	padding: 35rpx 40rpx;
	display: flex;
	.logo-img{
		width: 100rpx;
		height: 100rpx;
	}
	.fabupindao-cont{
		flex: 1;
		margin-left: 30rpx;
		.fabupindao-name{
			font-size: 28rpx;
		}
		.fabupindao-text{
			color: #c3c3c3;
			font-size: 28rpx;
			margin-top: 10rpx;
		}
	}
	
}
.xiangqing-tab{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 20rpx;
	display: flex;
	align-items: center;
	padding: 35rpx 0;
	.xiangqing-tab-list{
		width: 50%;
		text-align: center;
		font-size: 28rpx;
		color: #9d9d9d;
	}
	.active{
		color: #515151;
	}
}
.xiangqing-cont{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 30rpx 30rpx 150rpx;
	margin: 0 20rpx;
	.content{
		color: #8d8d8d;
		font-size: 26rpx;
		line-height: 50rpx;
	}
}
.xiangqing-foot{
	background-color: #e7e7e7;
	padding: 20rpx 0;
	position: fixed;
	bottom: 0;
	width: 100%;
	.lijibaoming{
		margin: 0 150rpx;
		background-color: #2ea34a;
		color: #FFFFFF;
	}
}
.baomingchengyuan{
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 0 20rpx;
	padding-bottom: 150rpx;
	.scroll-Y{
		height: 500rpx;
	}
	.baomingchengyuan-cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 55rpx;
		border-bottom: 1px solid #ebebeb;
		.touxiang{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
		}
		.baoming-name{
			flex: 1;
			margin: 0 20rpx;
			color: #515151;
			font-size: 28rpx;
		}
		.chakanzhuye{
			font-size: 24rpx;
			color: #898989;
		}
	}
}
</style>
